<template>
  <div class="main_bg">
    <my-header backBtn>
      <div slot="title">
        书包定位
      </div>
      <div slot="right" @click="submit">
      	功能介绍
      </div>
    </my-header>
    <div class="tishi">
      温馨提示：请选择您要查看信息的宝贝！
    </div>
    <div class="weui-cells" style="text-align: left">
      <a class="weui-cell weui-cell_access" href="javascript:;" v-for="item in studentList">
        <div class="weui-cell__bd" @click="goToMapFn(item)">
          <p>{{item.name}}<span class="gps-code" v-if="item.gpsCode">{{item.gpsCode}}</span></p>
        </div>
        <div class="jiebang" v-if="item.gpsCode" @click="unbindGpsFn(item)">解绑</div>
        <div class="bangding" @click="bindGpsFn(item)" v-else>未绑定</div>
      </a>
    </div>



    <div v-if="modal.visible">
      <div class="weui-mask"></div>
      <div class="weui-dialog">
        <div class="dialog_close"  @click="modal.visible=false"><img  src="@/../static/img/dialog_close.png" /></div>

        <div class="weui-dialog__hd"><strong class="weui-dialog__title">绑定智能书包</strong></div>
        <div class="weui-dialog__bd"  style="text-align: left">
          <div class="weui-cells weui-cells_form">
            <div class="weui-cell__bd baobaoxingming">
              宝宝姓名：{{modal.form.name}}
            </div>
            <div class="weui-cell">

              <div class="weui-cell__bd">
                <input class="weui-input"  v-model="modal.form.gpsCode" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')"
                       placeholder="请输入智能书包编号"/>
              </div>
            </div>
          </div>
        </div>
        <div class="weui-dialog__ft">
          <a href="javascript:void (0);" class="weui-dialog__btn weui-dialog__btn_default" @click="modal.visible=false">取消</a>
          <a href="javascript:void (0);" class="weui-dialog__btn weui-dialog__btn_primary sure_color" @click="subFormFn">下一步</a>
        </div>
      </div>
    </div>

    <div v-if="modal2.visible">
      <div class="weui-mask"></div>
      <div class="weui-dialog">
        <div class="dialog_close"  @click="modal2.visible=false"><img  src="@/../static/img/dialog_close.png" /></div>

        <div class="weui-dialog__hd"><strong class="weui-dialog__title">解绑智能书包</strong></div>
        <div class="weui-dialog__bd"  style="text-align: left">
          <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
              <div class="weui-cell__bd jiebangcaozuo">
                <img  src="@/../static/img/dialog_del.png" /> 您确定要对{{modal2.form.name}}进行书包解绑操作吗？
              </div>
            </div>
          </div>
        </div>
        <div class="weui-dialog__ft">
          <a href="javascript:void (0);" class="weui-dialog__btn weui-dialog__btn_default" @click="modal2.visible=false">取消</a>
          <a href="javascript:void (0);" class="weui-dialog__btn weui-dialog__btn_primary sure_color" @click="subFormFn2">确定</a>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  export default {
    name: "BindGps",
    data() {
      return {
        modal: {
          visible: false,
          form: {
            studentId: '',
            gpsCode: '',
            name:''
          }
        },
        modal2: {
          visible: false,
          form: {
            studentId: '',
            gpsCode: '',
            name:''
          }
        },
        studentList: [],
      }
    },
    methods: {
      submit() {
      	this.$router.push({
      	  path:'/GpsSug'
      	})
      },
      fetchKinsfolkStudentList() {
        this.$http.fetchKinsfolkStudentList().then(resp => {
          /*if (list.length===1&&list[0].gpsCode){
            this.goToMapFn(list[0]);
            return;
          }*/
          this.studentList = resp.data;
        })
      },
      bindGpsFn(item) {
        Object.assign(this.modal, {
          visible: true,
          form: {
            studentId: item.id,
            gpsCode: '',
            name:item.name
          }
        })
      },
      unbindGpsFn(item) {
        Object.assign(this.modal2, {
          visible: true,
          form: {
            studentId: item.id,
            gpsCode: item.gpsCode,
            name:item.name
          }
        })
      },
      goToMapFn(student){
        this.$http.fetchGpsStatus({gpsCode:student.gpsCode}).then(resp=>{
          let data={
            id:student.id,
            lng:student.lng,
            lat:student.lat,
            power:resp.data.power,
            locationTime:student.locationTime,
            name:student.name,
            pertype:false,
            avatar:student.avatar
          }
          this.$router.push({
            path:'/map',
            query:data
          })
        })
      },
      subFormFn() {
        let code = this.modal.form.gpsCode;
        if (!code) {
          this.$weui.topTips('请输入编号');
          return;
        }
        this.modal.visible = false;
        this.$toast.show('提交中...', 'loading');
        this.$http.bindGps(this.modal.form).then(resp => {
          this.$toast.hide();
          this.$router.go(0);
          // let data={
          //   id:this.modal.form.studentId,
          //   lng:'116.404',
          //   lat:'39.915',
          //   type:'bind'
          // }
          // this.$router.push({
          //   path:'/GpsAQ',
          //   query:data
          // })


        }).catch(resp => {
          this.$toast.hide();
        })

      },
      subFormFn2() {
        this.modal2.visible = false;
        this.$toast.show('提交中...', 'loading');
        this.$http.unbindGps(this.modal2.form).then(resp => {
          this.$toast.hide();
          this.$router.go(0);
        }).catch(resp => {
          this.$toast.hide();
        })
      }
    },
    created() {

    },
    mounted() {
      this.fetchKinsfolkStudentList();
    }
  }
</script>

<style scoped>
  .main_bg{
    height: 100%;
    background:url(../../../static/img/bind_bg.png) no-repeat;
    background-size:100% 100%;
    background-attachment:fixed;
  }
  .bg{
    width: 100%;
    height: 253px;
    background:url(../../../static/img/bind_bg.png);
  }
  .tishi{
    margin-top: 10px;
    margin-left: 10px;
    text-align: left;
    color: #ef5e63;
  }
  .gps-code{
    margin-left: 25px;
    font-weight:normal;
    color: #828282;
    font-size: 13px;
  }
  .jiebang{
    color: #49c13a;
  }
  .bangding{
    color: #ef5e63;
  }
  .jiebangcaozuo{
    color: #000000;
  }
  .dialog_close{
    margin-top: 8px;
    margin-right: 8px;
    float: right;
  }
  .sure_color{
    color: #36c12d;
  }
  .baobaoxingming{
    color: #000000;
    margin: 8px;
  }
</style>
